<template>
	<view class="safety storesTransfer">
		<view class="topHeaderBox between navBox" :style="{paddingTop: (systemBarHeight + 10) + 'px'}">
			<image class="backIcon" src="https://wx.2024csnl.com/static/mine/back.png" @click="goBack(100)"></image>
			<view>{{isEdit ? "更新视频": "发布视频"}}</view>
			<view></view>
		</view>

		<view class="joinService">
			<view class="msgBox" style="margin-top: 50px;">
				<view>
					<view class="recruitment">
						<view class="card">
							<form class="form">
								<view class="form-rich">
									<textarea v-model="description" name="description" placeholder="添加作品描述..." />
								</view>
								<view class="form-item">
									<view class="form-item__label">
										<image src="https://wx.2024csnl.com/static/video/icon-1.png" mode="">
										</image>
										<text>视频名称</text>
									</view>
									<view class="form-item__value icon-mo-blank">
										<view class="input">
											<input type="text" v-model="name" name="name" placeholder="填写视频名称">
										</view>
									</view>
								</view>
								<view class="form-item">
									<view class="form-item__label">
										<image src="https://wx.2024csnl.com/static/video/icon-2.png" mode="">
										</image>
										<text>视频位置</text>
									</view>
									<view class="form-item__value icon-mo" @click="handleChooseLoaction">
										<view class="picker">
											{{address}}
										</view>
									</view>
								</view>

								<view class="form-item">
									<view class="form-item__label">
										<image src="https://wx.2024csnl.com/static/video/icon-3.png" mode="">
										</image>
										<text>选择红包</text>
									</view>
									<view class="form-item__value icon-mo">
										<view class="picker"
											style="display: flex; align-items: center; justify-content: flex-end;">
											<view>
												<picker mode="selector" :range="rlistArray" range-key="name"
													:value="index" @change="bindRPickerChange">
													<view style="font-size: 30rpx;color: #999999;">
														{{rName }}
													</view>
												</picker>
											</view>
											<view style="margin-left: 20px;" v-if="redid">
												<button
													style="background-color: #41644A; height: 30px; color: white; font-size: 12px;" @click="clearRedId">清除选择</button>
											</view>
											<view style="margin-left: 20px;" v-else>
												<button
													style="background-color: #41644A; height: 30px; color: white; font-size: 12px;"
													@click="createRed">创建</button>
											</view>
										</view>
									</view>
								</view>
								<view class="form-item">
									<view class="form-item__label">
										<image src="https://wx.2024csnl.com/static/video/icon-4.png" mode="">
										</image>
										<text>作品分类</text>
									</view>
									<view class="form-item__value icon-mo">
										<view class="picker">
											<picker mode="selector" :range="clistArray" range-key="name" :value="index"
												@change="bindCPickerChange">
												<view style="font-size: 30rpx;color: #999999;">
													{{cName }}
												</view>
											</picker>
										</view>
									</view>
								</view>
								<view class="form-item">
									<view class="form-item__label">
										<image src="https://wx.2024csnl.com/static/video/icon-5.png" mode="">
										</image>
										<text>视频样式</text>
									</view>
									<view class="form-item__value">
										<view
											style="display: flex; align-items: center; justify-content: flex-end; height: 100rpx; align-content: flex-end">

											<view>
												<button @click="objectfitFill"
													:style="objectfit == 'fill' ? `background-color: #41644A; height: 30px; color: white; font-size: 12px;`: `background-color: #ccc; height: 30px; color: black; font-size: 12px;`">竖屏</button>
											</view>
											<view style="margin-left: 10px;">
												<button @click="objectfitContain"
													:style="objectfit == 'contain' ? `background-color: #41644A; height: 30px;  color: white; font-size: 12px;`: `background-color: #ccc; height: 30px;color: black; font-size: 12px;`">横屏</button>
											</view>
										</view>
									</view>
								</view>
								<view class="form-item">
									<view class="form-item__label">
										<image src="https://wx.2024csnl.com/static/video/icon-6.png" mode="">
										</image>
										<text>商品链接</text>
									</view>
									<view class="form-item__value">
										<view class="input">
											<input type="text" v-model="productids" name="productids"
												disabled="disabled" placeholder="敬请期待">
										</view>
									</view>
								</view>
								<view class="form-item">
									<view class="form-item__label">
										<image src="https://wx.2024csnl.com/static/video/icon-7.png" mode="">
										</image>
										<text>全景链接</text>
									</view>
									<view class="form-item__value">
										<view class="input">
											<input type="text" v-model="vr_link" name="vr_link" disabled="disabled"
												placeholder="敬请期待">
										</view>
									</view>
								</view>
								<view class="form-item">
									<view class="form-item__label">
										<image src="https://wx.2024csnl.com/static/video/icon-8.png" mode="">
										</image>
										<text>视频拍摄</text>
									</view>
									<view class="form-item__value icon-mo" @click="chooseFile()">
										<view class="upload">
											<button type="default">
												<text>点击上传视频</text>
											</button>
										</view>
									</view>
								</view>
								<view v-if="url" class="form-preview">
									<view class="cover">
										<video :src="url"></video>
										<text>视频预览</text>
									</view>
								</view>
								<view class="form-foot">
									<button class="submit" @click="onSubmit()">
										<image src="https://wx.2024csnl.com/static/video/icon-upload.png" mode="">
										</image>
										<text>{{isEdit ? "更新": "发布"}}</text>
									</button>

									<button v-if="isEdit && status == 1 && is_show == 1" class="submitXiaJia"
										@click="onXiaJia()">
										<text>下架</text>
									</button>

									<button v-if="isEdit && status == 1 && is_show == 0" class="submit"
										@click="onXiaJia()">
										<image src="https://wx.2024csnl.com/static/video/icon-upload.png" mode="">
										</image>
										<text>上架</text>
									</button>
								</view>
							</form>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		getBusinessType,
		setBusinessLicense,
		postVideoData,
	} from "../../api/index.js"
	import {
		getLocationInfo,
		geocoder,
		place
	} from "../../utils/index.js"
	export default {
		components: {},
		data() {
			return {
				systemBarHeight: getApp().globalData.systemBarHeight,
				video_duration: 0,
				address: '选择地理位置',
				isEdit: false,
				vItemInfo: {},
				cName: '请选择分类',
				rName: '请选择红包',
				index: 0,
				objectfit: 'fill',
				productids: '',
				vr_link: '',
				clistArray: [], //经营类型list
				clist: [], //经营类型
				rlistArray: [], //经营类型list
				rlist: [], //经营类型
				cid: '', //选择的经营类型id
				redid: '',
				name: '',
				is_show: 0,
				status: '',
				description: '',
				latitude: '',
				longitude: '',
				url: '', //店铺头像
				shopMsg: {}, //店铺数据
				isAgency: getApp().globalData.isAgency,
			}
		},
		async onLoad(opt) {
			if (opt.id) {
				this.isEdit = true;

				await this.onGetVideoInfo(opt.id)
				this.name = this.vItemInfo.name;
				this.description = this.vItemInfo.description;
				this.latitude = this.vItemInfo.latitude;
				this.longitude = this.vItemInfo.longitude;
				this.url = this.vItemInfo.url;
				this.vr_link = this.vItemInfo.vr_link;
				this.productids = this.vItemInfo.productids;
				this.objectfit = this.vItemInfo.objectfit;
				this.cid = this.vItemInfo.cid;
				this.redid = this.vItemInfo.redid;
				this.status = this.vItemInfo.status;
				this.is_show = this.vItemInfo.is_show;
				this.video_duration = this.vItemInfo.video_duration;

				let address = await geocoder(this.latitude, this.longitude);

				this.address =
					`${address.address.province}${address.address.city}${address.address.district}${address.address.street_number}`
			} else {
				this.isEdit = false;
				var addVideoTabAction = uni.getStorageSync("addVideoTabAction");

				if (addVideoTabAction && addVideoTabAction == "true") {

					uni.setStorageSync('addVideoTabAction', "")

					this.chooseFile();
				}

				let platform = uni.getSystemInfoSync().platform
				if (platform == 'ios') {
					await this.onGetWebViewUrl()
				}
				if (platform == 'android') {
					var _taht = this;
					uni.getStorage({
						key: 'LocationIsAuthorization',
						success: function(res) {
							if (res.data == 'true') {
								_taht.onGetWebViewUrl()
							} else {
								_taht.requestAndroidPermissionWebView(
									'android.permission.ACCESS_FINE_LOCATION', 'click')
							}
						},
						fail: function(res) {
							_taht.requestAndroidPermissionWebView(
								'android.permission.ACCESS_FINE_LOCATION', 'click')
						}
					});
				}
			}

			await this.onGetVideocategory()

		},
		onUnload() {
			uni.setStorageSync('addVideoTab', "true")
		},
		onShow() {
			try {
				this.onGetVideocategory();
			} catch (e) {}
		},
		methods: {
			clearRedId() {
				this.redid = '';
				this.rName = '请选择红包';
			},
			createRed() {
				uni.navigateTo({
					url: "/pages/video/publishRed"
				})
			},
			objectfitFill() {
				this.objectfit = "fill";
			},
			objectfitContain() {
				this.objectfit = "contain";
			},
			bindCPickerChange(e) {
				this.cName = this.clistArray[e.detail.value]
				this.cid = this.clist[e.detail.value].id
			},
			bindRPickerChange(e) {
				this.rName = this.rlistArray[e.detail.value]
				this.redid = this.rlist[e.detail.value].id
			},

			// 选择地址
			handleChooseLoaction(type) {
				uni.chooseLocation({
					success: (res) => {
						const {
							longitude,
							address,
							latitude,
							name
						} = res
						this.address = address
						this.longitude = longitude
						this.latitude = latitude
					},
					fail: (err) => {
						console.log(err);
					},
				});
			},
			async requestAndroidPermissionWebView(permisionID, type) {
				let _that = this
				const result = await permision.requestAndroidPermission(permisionID)
				if (result == 1) {
					if (permisionID == 'android.permission.ACCESS_FINE_LOCATION') {
						uni.setStorage({
							key: 'LocationIsAuthorization',
							data: 'true',
							success: function() {
								_that.onGetWebViewUrl();
							}
						});
					}
					if (type == 'click') {
						this.showToast('获取定位中~');
					}
					await this.onGetWebViewUrl()
					setInterval(async () => {
						await this.onGetWebViewUrl()
					}, 600000);
				} else if (result == 0) {
					if (type == 'click') {
						this.showToast('您未授权定位,请到设置中开启~');
					}
				} else {
					if (type == 'click') {
						this.showToast('您未授权定位,请到设置中开启~');
					}
				}
			},
			async onGetWebViewUrl() {
				let address = await getLocationInfo();
				console.log(address)
				if (address) {
					const {
						latitude,
						longitude
					} = address;
					this.latitude = latitude;
					this.longitude = longitude;
					this.address =
						`${address.address.province}${address.address.city}${address.address.district}${address.address.street_number}`
				} else {
					setTimeout(async () => {
						await this.onGetWebViewUrl();
					}, 5000)
				}
			},
			async onXiaJia() {
				const res = await postVideoData(`s=/ApiShortvideo/editvideoshow`, {
					id: this.vItemInfo.id
				})

				console.log(res, "下架")

				if (res.data.status == 1) {
					this.showToast(res.data.msg);
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.showToast(res.data.msg);
				}
			},
			// 提交数据
			async submit() {
				if (this.isEdit) {
					const res = await postVideoData(`s=/ApiShortvideo/editvideo`, {
						id: this.vItemInfo.id,
						name: this.name,
						description: this.description,
						latitude: this.latitude,
						longitude: this.longitude,
						video_duration: this.video_duration,
						cid: this.cid,
						redid: this.redid,
						url: this.url,
						productids: this.productids,
						vr_link: this.vr_link,
						objectfit: this.objectfit
					})

					console.log(res)

					if (res.data.status == 1) {
						this.showToast(res.data.msg);
						uni.navigateBack({
							delta: 1
						});
					} else {
						this.showToast(res.data.msg);
					}
				} else {
					const res = await postVideoData(`s=/ApiShortvideo/uploadvideo`, {
						name: this.name,
						description: this.description,
						latitude: this.latitude,
						longitude: this.longitude,
						productids: this.productids,
						video_duration: this.video_duration,
						cid: this.cid,
						redid: this.redid,
						url: this.url,
						vr_link: this.vr_link,
						objectfit: this.objectfit
					})

					console.log(res)

					if (res.data.status == 1) {
						this.showToast(res.data.msg);
						uni.navigateBack({
							delta: 1
						});
					} else {
						this.showToast(res.data.msg);
					}
				}
			},
			onSubmit() {
				const {
					name,
					description,
					url,
					longitude,
					latitude,
					cid,
					objectfit
				} = this
				switch (true) {
					case name == '':
						this.showToast('视频名称不能为空')
						break;
					case description == '':
						this.showToast('视频简介不能为空')
						break;
					case url == '':
						this.showToast('请上传视频')
						break;
					case cid == '':
						this.showToast('请选择视频分类')
						break;
					case longitude == '':
						this.showToast('请开启GPS')
						break;
					case latitude == '':
						this.showToast('请开启GPS')
						break;
					case objectfit == '':
						this.showToast('请选择视频样式')
						break;
					default:
						this.submit()
				}
			},
			//上传图片
			async chooseFile() {
				uni.chooseVideo({
					count: 1,
					compressed: false,
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						this.video_duration = res.duration;
						this.upImg(res.tempFilePath)
					}
				});
			},
			upImg(path) {
				let BASE_URL = getApp().globalData.BASE_URL
				let platform = 'app'
				// #ifdef H5
				if (this.isAgency) {
					platform = 'h5'
					BASE_URL = '/api'
				}

				// #endif

				const sessionData = uni.getStorageSync('sessionData')
				// #ifdef H5
				platform = 'h5'
				if (isAgency) {
					BASE_URL = '/api'
				}
				// #endif
				let sessionDataLink = "";
				if (sessionData && sessionData.session_id) {
					sessionDataLink = `&session_id=${sessionData.session_id}`;
				}
				console.log(`${BASE_URL}?s=/ApiVideoupload/uploadVideo&aid=1&platform=${platform}${sessionDataLink}`)
				uni.uploadFile({
					url: `${BASE_URL}?s=/ApiVideoupload/uploadVideo&aid=1&platform=${platform}${sessionDataLink}`,
					filePath: path,
					name: 'file',
					// #ifndef H5
					header: {
						'content-type': 'multipart/form-data'
					},
					// #endif
					success: (res) => {
						console.log(res, "上传成功")
						const data = JSON.parse(res.data);
						const {
							msg,
							status,
							url
						} = data
						if (status == 1) {
							this.url = url
						}
						uni.hideLoading();
					}
				});
			},

			// 获取商家类型
			async onGetVideocategory() {
				const res = await getBusinessType('s=/ApiShortvideo/videocategory')
				const {
					clist,
					redbag_list,
					msg,
					status
				} = res.data
				console.log(res, "Videocategory")
				if (status == 1) {
					this.clistArray = clist.map(item => {
						return item.name
					})

					this.rlistArray = redbag_list.map(item => {
						return item.red_name
					})

					this.clist = clist

					for (var i = 0; i < clist.length; i++) {
						if (clist[i].id == this.cid) {
							this.cName = clist[i].name
						}
					}

					this.rlist = redbag_list

					for (var i = 0; i < redbag_list.length; i++) {
						if (redbag_list[i].id == this.redid) {
							this.rName = redbag_list[i].red_name
						}
					}
				} else {
					this.showToast(msg)
				}
			},

			// 获取商家类型
			async onGetVideoInfo(id) {
				const res = await getBusinessType(`s=/ApiShortvideo/getvideoinfo&id=${id}`)
				const {
					video_info,
					msg,
					status
				} = res.data
				console.log(res, "video_info")
				if (status == 1) {
					this.vItemInfo = video_info
				} else {
					this.showToast(msg)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btnBox {
		padding: 0 30rpx 40rpx 30rpx;
		border-bottom: 1px solid #f7f7f7;
	}

	.oneBtn {
		text-align: center;
		color: #333333;
		background: #F7F7F7;
		border-radius: 30rpx;
		width: 185rpx;
		padding: 11rpx 0;
	}

	.activeBtn {
		color: #fff;
		background: #41644A;
	}

	.msgBox {
		width: 100vw;
		border-radius: 50rpx 50rpx 0 0;
		padding: 0;
		background: #fff;
	}

	.topHeaderBox {
		// #ifdef APP-PLUS
		padding: 30rpx;
		// #endif
		// #ifdef H5
		padding: 30rpx;
		// #endif
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999;
		display: flex;
		background: #41644A;

	}

	.navBox {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
	}

	.backIcon {
		width: 21rpx;
		height: 37rpx;
	}

	.joinService {
		.bgImg {
			width: 100vw;
			height: 488rpx;
		}
	}
</style>


<style lang="scss" scoped>
	.license {
		margin-left: 20%;
		width: 290rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.agreement {
		text-align: center;
		color: #999;
		font-size: 22rpx;
		margin: 52rpx 0 30rpx;

		text {
			color: #0084FF;
			margin-left: 10rpx;
		}
	}

	.upTwoImageBox {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 0 26rpx;

		image {
			width: 100%;
			height: 218rpx;
		}
	}

	.licenseTit {
		color: #666;
		font-size: 32rpx;
	}

	.minorText {
		color: #C8C8C8;
		font-size: 30rpx;
	}

	.licenseBox {
		padding: 30rpx;
		font-size: 36rpx;

		.hint {
			font-size: 24rpx;
			color: #C8C8C8;
			margin: 29rpx 0 46rpx 0;
		}

		.upOne {
			height: 340rpx;
			width: 100%;
		}

	}

	.downIcon {
		right: 60rpx;
		position: absolute;
		width: 34rpx;
		height: 15rpx;
	}

	.card {
		border-top: 10rpx solid #f7f7f7;

	}

	.recruitment {}

	.addressBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 65%;

	}



	.submitBtn {
		margin: 50rpx 30rpx;
		color: #fff;
		font-size: 34rpx;
		background: #41644A;
		border-radius: 14rpx;
		padding: 20rpx 0;
		justify-content: center;
	}

	.textareaBox {
		position: relative;
	}

	.textNum {
		position: absolute;
		bottom: 20rpx;
		text-align: end;
		width: 95%;
	}


	.oneInput {
		margin-bottom: 30rpx;
		font-size: 36rpx;
		padding: 30rpx 41rpx;
		border-bottom: 1px solid #f7f7f7;
		border-radius: 10rpx;
		align-items: center;

		.title {
			width: 30%;
		}

	}
</style>

<style lang="less" scoped>
	.form {
		.form-rich {
			position: relative;
			padding: 0 40rpx;

			textarea {
				height: 160rpx;
				line-height: 40rpx;
				font-size: 28rpx;
			}
		}

		.form-ait {
			display: flex;
			padding: 0 40rpx 40rpx;

			.item {
				margin: 0 20rpx 0 0;

				text {
					display: block;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
					border-radius: 10rpx;
					background: #e1e1e1;
					color: #000000;
					font-size: 28rpx;
				}
			}
		}

		.form-item {
			position: relative;
			overflow: hidden;
			margin: 0 40rpx;
			display: flex;

			.form-item__label {
				height: 100rpx;
				line-height: 100rpx;

				image {
					vertical-align: middle;
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				text {
					vertical-align: middle;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.icon-mo-blank {
				padding: 0 0 0 0;
				background: #eeeeee;
				background: url('https://wx.2024csnl.com/static/video/icon-mo-blank.png') right center no-repeat;
				background-size: 30rpx;
			}

			.icon-mo {

				padding: 0 40rpx 0 0;
				background: #eeeeee;
				background: url('https://wx.2024csnl.com/static/video/icon-mo.png') right center no-repeat;
				background-size: 30rpx;
			}

			.form-item__value {
				flex: 1;
				color: #999999;
				text-align: right;
				vertical-align: middle;
				height: 100rpx;
				line-height: 100rpx;

				.input {
					input {
						height: 100rpx;
						font-size: 28rpx;
					}
				}

				.picker {
					font-size: 28rpx;

					.placeholder {}
				}

				.upload {
					button {
						height: 100rpx;
						line-height: 100rpx;
						border: 0;
						text-align: right;
						background: transparent;
						color: #999999;
						border-radius: 0;
						padding: 0;
						font-size: 28rpx;

						&:after {
							border: 0;
						}
					}
				}
			}
		}

		.form-preview {
			position: relative;
			padding: 40rpx;

			.cover {
				margin: 0 auto;
				width: 400rpx;
				position: relative;
				background: #eeeeee;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 400rpx;
					height: 400rpx;
				}

				video {
					width: 400rpx;
					height: 400rpx;
				}

				text {
					display: block;
					width: 100%;
					margin-top: -5px;
					z-index: 1;
					background: fade(#000000, 30%);
					color: #ffffff;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}

		.form-foot {
			position: relative;
			display: flex;
			padding: 40rpx 40rpx;

			.submit {
				flex: 1;
				margin: 0 10px;
				height: 80rpx;
				line-height: 80rpx;
				background: #fc3e5a;
				color: #ffffff;

				image {
					vertical-align: middle;
					width: 40rpx;
					height: 40rpx;
					margin: 0 20rpx 0 0;
				}

				text {
					vertical-align: middle;
					font-size: 32rpx;
				}
			}

			.submitXiaJia {
				flex: 1;
				margin: 0 10px;
				height: 80rpx;
				line-height: 80rpx;
				background: #ccc;
				color: #000;

				image {
					vertical-align: middle;
					width: 40rpx;
					height: 40rpx;
					margin: 0 20rpx 0 0;
				}

				text {
					vertical-align: middle;
					font-size: 32rpx;
				}
			}
		}
	}
</style>